<script setup lang='ts'>
import NP from 'number-precision'

const props = defineProps(['gradedetail'])
const emits = defineEmits(['close'])
const { gradedetail } = toRefs(props)
console.log('🚀 ~ gradedetail:', gradedetail?.value)
const gradeTitle = computed(() => {
    return `${gradedetail?.value?.levelName}会员`
})
const percentage = computed(() => {
    const result = (gradedetail?.value?.currentGrowthValue ?? 0) / (gradedetail?.value?.currentLevelTotalGrowthValue ?? 0) * 100
    return Number(result) > 100 ? 100 : NP.round(result, 2)
})
const diffgrade = computed(() => {
    const result = (gradedetail?.value?.currentLevelTotalGrowthValue ?? 0) - (gradedetail?.value?.currentGrowthValue ?? 0)
    return Number(result) < 0 ? 0 : NP.round(result, 0)
})
</script>

<template>
    <div>
        <div class="mb-20 rounded-5 bg-#09cd8a p-20 text-#fff"
             style="display: inline-block;"
        >
            <div class="mb-30">
                {{ gradeTitle }}
            </div>

            <div class="mb-10">
                <span class="text-20 fw-600">{{ gradedetail?.currentGrowthValue ?? 0 }}</span>
                /
                <span class="text-14">{{ gradedetail?.currentLevelTotalGrowthValue ?? 0 }}</span>
            </div>

            <el-progress :percentage="percentage" />

            <div class="text-12">
                成长值 距离升级还有{{ diffgrade }}成长值
            </div>
        </div>

        <div class="mb-20 flex">
            <span>会员权益</span>

            <div class="ml-12 flex flex-col gap-20">
                <div v-for="item in gradedetail?.memberRights"
                     :key="item"
                >
                    {{ item }}
                </div>
            </div>
        </div>

        <el-button type="primary"
                   @click="emits('close')"
        >
            关闭
        </el-button>
    </div>
</template>

<style scoped>
.el-progress--line {
    width: 270px;
    margin-bottom: 5px;
}
</style>
